<template>
  <div class="flex-center">
    <div style="width: 1400px">
      <el-form inline style="margin-top: 20px" @submit.prevent>
        <el-form-item>
          <el-input
              v-model="bardQuery.keywords"
              style="width: 400px"
              placeholder="请输入关键字"
              class="input-with-select"
              @keyup.enter="getBardList"
          >
            <template #append>
              <el-button icon="Search" @click="getBardList">搜索</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>
      <div class="border">
        <el-row :gutter="20">
          <el-col :span="6" v-for="(item,index) in bardPage.list" :key="item.bardId" @click="goBardDetail(item.bardId)">
            <el-card>
              <el-row>
                <el-col :span="12">
                  <el-avatar shape="square" :src="item.cover" style="height: 100px;width: 100px"></el-avatar>
                </el-col>
                <el-col :span="12">
                  <el-link>
                    <h5>
                      {{ item.bardName }}
                    </h5>
                  </el-link>
                  <el-row>
                    <el-col :span="12">
                      <el-text type="primary" size="large">
                        <el-icon>
                          <UserFilled/>
                        </el-icon>
                        {{ item.followerCount }}
                      </el-text>
                    </el-col>
                    <el-col :span="12">
                      <el-text type="primary" size="large">
                        <el-icon>
                          <Edit/>
                        </el-icon>
                        {{ item.postCount }}
                      </el-text>
                    </el-col>
                  </el-row>
                  <el-text size="small">
                    {{ item.description }}
                  </el-text>
                </el-col>
              </el-row>
            </el-card>
          </el-col>
        </el-row>
        <div class="flex-end border">
          <el-pagination
              layout="prev, pager, next"
              :total="bardPage.total"
              small
              v-model:page-size="bardPage.pageSize"
              v-model:current-page="bardPage.pageNum"
          >
          </el-pagination>
        </div>
      </div>
    </div>

  </div>

</template>

<script setup lang="ts">
import {ref, reactive, onMounted, watch} from "vue";
import {useRouter} from "vue-router";
import {reqGetBardVOPage} from "@/api/social/bard";
import type {SocBardVO} from "@/api/social/bard/type";

const router = useRouter()
let bardPage = reactive({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  list: [] as SocBardVO[]
})
let bardQuery = reactive({
  pageNum: 1,
  pageSize: 10,
  keywords: '',
  categoryId: -1
})

let getBardList = async () => {
  let res = await reqGetBardVOPage(bardQuery)
  Object.assign(bardPage, res.data)
}
let goBardDetail = (bardId: string) => {
  router.push({
    name: "bard-detail",
    query: {
      bardId
    },
  })
}
onMounted(() => {
  getBardList()
})
watch(() => bardQuery.pageNum, () => {
  getBardList()
})
</script>

<style scoped>

</style>
